<template>
  <BaseDialog
    :title="bindType === 'pc' ? $t('绑定PC角色') : $t('绑定APP角色')"
    v-model:visible="dialogVisible"
    width="800px"
    :is-minus-full="false"
    @close="dialogVisible = false"
    class="body"
  >
    <div class="dialog">
      <QueryForm
        ref="conditionForm"
        module="systemPcUsers"
        v-model:searchForm="searchForm"
        v-model:search-column="searchColumn"
        @handle-search="onSearch"
      />
      <div class="common-box">
        <MyTable
          ref="commonTable"
          table-type="dialogTable"
          :data-source="dataSource"
          :loading="tableLoading"
          :page-vo="pageVo"
          :columns="columns"
          @handle-page-change="handlePageChange"
        />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" class="cancel-btn">{{
          $t("取消")
        }}</el-button>
        <el-button :loading="subLoading" @click="onSubmit()" class="save-btn">{{
          $t("保存")
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>
<script setup>
import { ref, reactive, watch, defineEmits, computed } from "vue";
import * as api from "@/api/index";
import i18n from "@/lang/index";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  bindType: {
    type: String,
    default: function () {
      return "pc";
    },
  },
  currentUser: {
    type: Object,
    default: () => {
      return {};
    },
  },
  tType: {
    type: Number,
    default: () => {
      return 1;
    },
  },
});

const subLoading = ref(false);
const searchForm = reactive({});
const dataSource = ref([]);
const searchColumn = ref([
  {
    label: "角色名称",
    type: "label_input",
    placeholder: "请输入",
    prop: "roleName",
    span: 12,
  },
]);
const pageVo = reactive({
  total: 0,
  pageSize: 50,
  currentPage: 1,
});
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    fixed: "left",
    align: "center",
  },
  {
    field: "roleName",
    title: "角色名称",
  },
  {
    field: "siteRankName",
    title: "机构级别",
  },
  {
    field: "status",
    title: "状态",
    filters: [
      { label: i18n.global.t("启用"), value: "0" },
      { label: i18n.global.t("禁用"), value: "1" },
    ],
    slots: { default: "status_default" },
    params: {
      color: {
        0: "green",
        1: "gray",
      },
    },
  },
]);
const tableLoading = ref(false);
const commonTable = ref();
const emits = defineEmits(["update:visible", "handleCancel", "submit"]);
let dialogVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
// 获取PC和APP角色数据
async function getTableList() {
  tableLoading.value = true;
  const params = {
    ...searchForm,
    type: props.tType,
    status: 0,
    pageNum: pageVo.currentPage,
    pageSize: pageVo.pageSize,
  };
  try {
    const { rows, total } = await api.default.system.role.list(params);
    dataSource.value = rows;
    pageVo.total = total;
    tableLoading.value = false;
  } catch {
    tableLoading.value = false;
  }
  const currentRolesArr = props.currentUser.roles.map((it) => it.roleId);
  const checkRows = dataSource.value.filter((it) =>
    currentRolesArr.includes(it.roleId)
  );
  commonTable.value.clearCheckboxRow(); // 先清空选中行
  nextTick(() => {
    checkRows.forEach((row) => {
      commonTable.value.setCheckboxRow(row, true);
    });
  });
}
// 保存用户选中的角色
async function onSubmit() {
  subLoading.value = true;
  const roleIds = commonTable.value.getCheckboxRecords().map((it) => it.roleId);
  console.log(roleIds);
  const res = {
    ...props.currentUser,
    roleIds,
  };
  if (props.bindType === "pc") {
    try {
      await api.default.system.user.editPC(res);
      ElMessage.success(i18n.global.t("绑定角色成功"));
      emits("submit");
      dialogVisible.value = false;
      subLoading.value = false;
    } catch {
      subLoading.value = false;
    }
  } else {
    try {
      await api.default.system.user.editAPP(res);
      ElMessage.success(i18n.global.t("绑定角色成功"));
      emits("submit");
      dialogVisible.value = false;
      subLoading.value = false;
    } catch {
      subLoading.value = false;
    }
  }
}
// 查询按钮
function onSearch() {
  pageVo.currentPage = 1;
  getTableList();
}
// 分页
function handlePageChange(val) {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  getTableList();
}
onMounted(() => {
  getTableList();
});
</script>
<style lang="scss" scoped>
.dialog {
  padding: 10px;
}
.btn {
  margin-left: 10px;
}
</style>
